import React, { Component } from 'react'

/* 
生命周期的钩子
1. constructor  => 渲染组件标签, 创建组件对象
  初始状态state => this.state = {数据}
  只调用一次
2. render => 渲染组件标签, 创建组件对象后
  返回组件界面(虚拟DOM)
  调用多次: 无论是初始渲染还是更新渲染都需要调用render, 返回一个新的虚拟DOM树 
            => 用于后面生成真实DOM或更新真实DOM
3. componentDidMount => 渲染组件标签, render执行且真实DOM挂载之后
  执行一次性异步任务: ajax/定时器
  只执行一次

4. componentDidUpdate => state/props更新了   当前组件/父组件: setState()
  数据变化后, 需要做了一些工作 => 比如: 发请求/将最新的数据保存起来
  每次更新都会执行(多次)

5. componentWillUnmount => 不再渲染组件
  做一些收尾的工作, 比如: 清除定时器
*/

/* 
当msg变化时, 将最新msg值提交给后台?
render中不能执行异步操作
在componentDidUpdate
*/
export default class LifeTest2 extends Component {

  constructor () {
    super()
    console.log('constructor')
    // 初始化状态
    this.state = {
      msg: 'atguigu'
    }
  }
  // state = {
  //   msg: 'atguigu'
  // }

  handleClick = () => {
    this.setState({msg: this.state.msg + '+++'})
  }

  componentDidMount () {
    console.log('componentDidMount')
    setTimeout(() => {
      console.log('定时器回调')
      this.setState({msg: this.state.msg + '---'})
    }, 2000)
  }

  /**
   * @param prevProps 包含旧的prop数据
   * @param prevState  包含旧的state数据
   */
  componentDidUpdate (prevProps, prevState) { 
    console.log('componentDidUpdate')
    // 如何判断是state中的msg变化?
    if (prevState.msg !==this.state.msg) {
      console.log('发送请求 msg=' + this.state.msg)
    }
  }

  componentWillUnmount () {
    console.log('componentWillUnmount')
    clearInterval(this.intervalId)
  }

  render() { // 不能执行异步操作
    console.log('render')
    const {msg} = this.state
    return (
      <div style={{border: '1px solid gray'}}>
        <h3>LifeTest组件</h3>  
        <p>state.msg: {msg}</p>
        <p>props.count: {this.props.count}</p>

        <button onClick={this.handleClick}>更新msg</button>
      </div>
    )
  }
}
